<template>
    <el-col :span="Number(colspan)">
        <el-form-item :label-width="labelWidth"
                      :label="label && property.p.indexOf('R') >= 0 ? '*' + label : label"
                      v-show="property.p.indexOf('H') === -1">
            <el-select filterable :disabled="property.p.indexOf('D') >= 0" v-model="property.value"
                       :placeholder="placeholder" @change="onChange" style="width: 100%;">
                <el-option v-for="(item, index) in option" :key="index" :label="item.label"
                           :value="item.value"></el-option>
            </el-select>
        </el-form-item>
    </el-col>
</template>

<script type="es6">
    import data from '@/utils/data.json';

    export default {
        props: {
            colspan: {
                type: String,
                default: '24'
            },
            labelWidth: {
                type: String,
                default: '120px'
            },
            label: {
                type: String,
                default: ''
            },
            placeholder: {
                type: String,
                default: ''
            },
            codetype: {
                type: String,
                default: ""
            },
            property: {
                type: Object,
                default: function () {
                    return {
                        value: '',
                        p: ''
                    }
                }
            },
            name: {
                type: String,
                default: ''
            },
            form: {
                type: Object,
                default: null
            },
            isChange: {
                type: Boolean,
                default: false
            },
            isClick: {
                type: Boolean,
                default: false
            },
            isBlur: {
                type: Boolean,
                default: false
            },
            isFocus: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                option: []
            }
        },
        mounted() {
            if (this.codetype) {
                this.option = data[this.codetype];
            }
        },
        methods: {
            /**
             * 点击事件
             */
            onClick() {
                if (!this.isClick) return;
                let obj = {
                    path: '/pageData/click',
                    form: this.form
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 选择事件
             */
            onChange() {
                if (!this.isChange) return;
                let obj = {
                    path: '/pageData/change/' + this.name,
                    form: this.form
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 失去焦点
             */
            onBlur() {
                if (!this.isBlur) return;
                let obj = {
                    path: '/pageData/blur',
                    form: this.form
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 获取焦点
             */
            onFocus() {
                if (!this.isFocus) return;
                let obj = {
                    path: '/pageData/focus',
                    form: this.form
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            }
        }
    }
</script>

<style lang="less" scoped>

</style>